<script setup lang="ts">
import { ref, watch } from "vue";

const props = defineProps<{ commentList: IComment[] | undefined }>();

const commentList = ref<IComment[]>();

const emit = defineEmits<{
  (e: "reply", parentId: number): void;
}>();

watch(
  () => props.commentList,
  (newVal) => {
    commentList.value = newVal;
  }
);

const handleReply = (parentId: number) => {
  emit("reply", parentId);
};
</script>
<template>
  <div class="comment" v-if="commentList">
    <div class="comment__num">共{{ commentList?.length }}条评论</div>

    <div class="comment__list">
      <div
        class="comment__item"
        v-for="comment in commentList"
        :key="comment.id"
      >
        <div class="comment__item-avatar">
          <img src="../assets/vue.svg" alt="" />
        </div>
        <div class="comment__item-info">
          <div class="comment__item-username">{{ comment.user.username }}</div>
          <div class="comment__item-content" @click="handleReply(comment.id)">
            {{ comment.content }}
          </div>
          <div class="comment__item-time">{{ comment.createdAt }}</div>
          <div class="comment__reply">
            <div
              class="comment__reply-item"
              v-for="reply in comment.replies"
              :key="reply.id"
            >
              <div class="comment__reply-avatar">
                <img src="../assets/vue.svg" alt="" />
              </div>

              <div class="comment__reply-info">
                <div class="comment__reply-username">
                  {{ reply.user.username }}
                </div>
                <div class="comment__reply-content">{{ reply.content }}</div>
                <div class="comment__reply-time">{{ reply.createdAt }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
